<template>
    <div class="dashboard-container">
      <div class="container">
        <div class="image-container">
          <img src="@/assets/gxfc.jpg" alt="活动图片" />
        </div>
        <div class="tableBar">
          <label style="margin-right: 5px">🦖活动降/升价力度：</label>
          <el-input
            v-model="activityStrength"
            placeholder="例如：添0.1即10%"
            style="width: 45%"
            clearable
          />
          <el-checkbox v-model="isDiscount" style="margin-left: 10px">降价</el-checkbox>
          <el-button class="normal-btn continue" @click="applyActivityStrength"
            >应用</el-button
          >
        </div>
      </div>
    </div>
  </template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Discount } from '@/api/activityApi';

@Component({
  name: 'Employee',
})
export default class extends Vue {
  private activityStrength: string = ''; // 活动降价/升价力度的输入框绑定值
  private isDiscount: boolean = true; // 是否降价，默认为降价

  // 应用活动降价/升价力度的方法
  private async applyActivityStrength() {
    if (!this.activityStrength) {
      this.$message.warning('请输入活动降价或升价的力度');
      return;
    }

    const pricePercent = parseFloat(this.activityStrength);

    await Discount(pricePercent, this.isDiscount)
      .then((res: any) => {
        if (String(res.data.code) === '1') {
          this.$message.success(`已应用活动${this.isDiscount ? '降价' : '升价'}力度：${this.activityStrength}`);
          console.log('Response from server:', res);
        } else {
          this.$message.error('应用活动力度失败，请检查输入是否正确');
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message);
        console.error('Error applying activity strength:', err);
      });
  }
}
</script>
  <style lang="scss" scoped>
  .normal-btn {
    margin-left: 10px;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    max-width: 800px; /* 设置最大宽度，防止内容过宽 */
    margin: 0 auto; /* 居中对齐 */
    padding: 20px;
  }
  
  .tableBar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .image-container {
    text-align: center; /* 图片居中 */
    margin-bottom: 20px; /* 图片与表单之间的间距 */
  }
  
  .image-container img {
    max-width: 90%; /* 控制图片宽度，例如设置为容器宽度的50% */
    height: auto; /* 保持图片比例 */
  }
  </style>